<template>
    <view-box class="ZymlListxq" bodyPaddingTop="0" bodyPaddingBottom="0">
        <x-header>{{title}}</x-header>
        <search v-model="searchValue" @on-focus="onFocus" @on-change="onChange" @on-cancel="onCancel" @on-submit="onSubmit" ref="search">
            <!--一直报错?页面name不能为search-->
        </search>
        <!-- <group-title> 安监局</group-title> -->
        <scroller lock-x height="-120px" @on-pullup-loading="onScrollBottom" :pullup-config="pullupconfig" ref="scrollerBottom" :use-pullup="true">
            <grid :cols="1" :show-lr-borders="false">
                <grid-item v-for="item in pageList" :key="item.id" @on-item-click="reDetailAction(item.id,item.resourceType,item.resourceSource ,item.categoryCodeId)" >
                    <div class="titles">{{item.resourceName}}</div>
                    <div class="textl">{{item.shareCondition}} </div>
                    <div class="textr">{{item.resourceTypeText}}</div>
                </grid-item>
            </grid>
            <!-- <load-more tip="loading"></load-more> -->
        </scroller>
    </view-box>
</template>
  <script>
import {
    ViewBox,
    XHeader,
    Search,
    Group,
    Grid,
    GridItem,
    GroupTitle,
    Scroller,
    LoadMore
} from "vux";
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
    name: "ZymlListxq",
    components: {
        ViewBox,
        XHeader,
        Search,
        Group,
        Grid,
        GridItem,
        GroupTitle,
        Scroller,
        LoadMore
    },
    data() {
        return {
            searchValue: "",
            title: "",
            codeId: "",
            results: [1, 2, 34, 5, 6],
            rows: 15,
            page: 1,
            pageList: [],
            total: 0,
            loaded: false,
            pullupconfig: {
                content: "上拉刷新",
                upContent: "上拉刷新",
                downContent: "上拉刷新",
                loadingContent: "加载中..."
            }
        };
    },
    computed: {
        //...mapGetters(["catalog_page"])
    },
    created() {
        if (this.$route.query.id !== undefined) {
            this.codeId = this.$route.query.id;
            this.title = this.$route.query.name;
            this.onFetching = true;
            let _self = this;
            this.$store
                .dispatch("getCatalogPage", {
                    codeId: this.codeId,
                    rows: this.rows,
                    page: this.page,
                    orgId: "",
                    resourceName: this.searchValue,
                    searchOrder: 0,
                    resourceMount: ""
                })
                .then(res => {
                    //console.log(1);
                    _self.pageList = res.rows;
//                  console.log(JSON.stringify(_self.pageList));
                    _self.total = res.rows.length;
                    _self.onFetching = false;
                    if (res.rows.length === res.total) {
                        _self.loaded = true;
                        _self.$refs.scrollerBottom.disablePullup();
                        _self.$refs.scrollerBottom.donePullup();
                    } else {
                        _self.page++;
                    }
                });
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs.scrollerBottom.reset({ top: 0 });
        });
    },
    methods: {
        onFocus() {},
        onCancel() {},
        onScrollBottom() {
            if (!this.onFetching && !this.loaded) {
                this.onFetching = true;
                let _self = this;
                this.$store
                    .dispatch("getCatalogPage", {
                        codeId: this.codeId,
                        rows: this.rows,
                        page: this.page,
                        orgId: "",
                        resourceName: this.searchValue,
                        searchOrder: 0,
                        resourceMount: ""
                    })
                    .then(res => {
                        //console.log(_self.page);
                        _self.pageList = _self.pageList.concat(res.rows);
                        _self.total += res.rows.length;
                        if (_self.total == res.total) {
                            _self.loaded = true;
                            _self.$refs.scrollerBottom.disablePullup();
                        } else {
                            _self.page++;
                        }
                        _self.$nextTick(() => {
                            _self.$refs.scrollerBottom.reset();
                        });
                        _self.$refs.scrollerBottom.donePullup();
                        _self.onFetching = false;
                    });
            }
        },
        onSubmit(keytext) {
            this.$refs.search.setBlur();
            this.$vux.toast.show({
                type: "text",
                position: "top",
                text: keytext
            });
            this.results = [1, 2, 3];
        },
        onChange(keytext) {
            this.results = [11, 22, 33];
        },
        reDetailAction(id , resourceType ,resourceSource , categoryCodeId){
        	
        	
        	if(resourceType == '1'){
        		this.$router.push({name: 'ZymlListxqDetailDb',params: {id : id , resourceSource : resourceSource , categoryCodeId : categoryCodeId}});
        	}else if(resourceType == '2'){
        		this.$router.push({name: 'ZymlListxqDetailFile', params: {'id' : id , 'resourceSource' : resourceSource ,  'categoryCodeId' : categoryCodeId}});
        	}else if(resourceType == '4'){
        		this.$router.push({name: 'ZymlListxqDetailInterface',params: {id : id , 'resourceSource' : resourceSource ,  'categoryCodeId' : categoryCodeId}});
        	}else{
        		this.$router.push({name: 'ZymlListxqDetailDb',params: {'id' : id , 'resourceSource' : resourceSource ,  'categoryCodeId' : categoryCodeId}});
        	}
        }
    }
};
</script>
<style lang="less">
.ZymlListxq {
    .icons {
        fill: #f70968;
    }
    .iconstext {
        color: #f70968;
    }
    .titles {
        font-size: 20px;
        color: black;
    }
    .textl {
        float: left;
        color: #e09932;
        font-weight: bold;
    }
    .textr {
        float: right;
        color: #0099eb;
        font-weight: bold;
    }
}
</style>